<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--
        flex项目上的属性:
                order : order越大元素越往后靠(order可以写负值)
                align-self: 单独控制一个项目的侧轴上的富裕空间
                flex-shrink: 收缩因子 开发的时候尽量要避免使用到这个属性!!!(默认值 1)
                flex-grow : 伸展因子
                flex-basis: 分配空间时,每个元素的基准值!!
                flex      : 用来实现等分 等比例布局

                富裕空间管理 是不会给项目去分配空间的;它只会控制富裕空间的位置
                弹性空间管理 按比例将主轴的富裕空间分配到项目上

                flex布局不是万能的!!! 它最大的优势在于处理等分 等比例布局
    -->
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 110px;
            height: 400px;
            border: 1px solid;
            display:flex;
        }
        .item{
            width: 50px;
            height: 50px;
            background: pink;
            text-align: center;
            flex-shrink: 1;
        }
        .item:nth-child(1){
            width: 200px;
        }

        /*溢出空间:  110 - (4*50 + 200)  = -290px*/
        /*一个flex-shrink要砍掉的值: -290 / 5 = -58*/


        /*
            1.计算收缩因子与基准值乘的总和
                1*200 + 1*4*50 = 400
            2.计算收缩因数
             收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
                1*200 / 400 = 0.5;
                1* 50 / 400 = 0.125;
            3.移除空间的计算
             移除空间= 项目收缩因数 x 负溢出的空间
                0.5 * -290 = -145
                0.125 * -290 = -36.25
       */


        /*
        flex使用的最佳实践:
                    等分布局
                    等比例布局

                    尽量少使用flex-shrink
                        在设计的时候 让容器的大小高于项目的总和; 这时flex-shrink是没有用的
        */

        /*程序员的核心能力: 解决bug的效率*/
    </style>
</head>
<body>
<div id="wrap">
    <div class="item">1</div>  <!--55-->
    <div class="item">2</div>  <!--13.75-->
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
</body>
</html>
